<template>
  <div :class="['learn-page-detail','color-'+$store.state.color]">
    <IndexNav></IndexNav>
    <ContainerBox class="learn-page-main" type="common">
      <div class="video-part" id="d3">
        <div class="video-area">
          <h2 v-if="videoListVOList.length===0">糟糕，没有你想要的视频</h2>
          <div class="mark-menu">点击这里的列表，来显示视频</div>
          <div class="mark-note">右边提供笔记记录</div>
          <div class="mark-sources">向下滚动，可以浏览问题和博客资源</div>
        </div>
      </div>
      <div class="right-part">
        <div class="video-menu">
          <div v-if="videoListVOList === null || videoListVOList.length === 0">目录为空</div>
          <div :class="['video-title',{'chosen-title':index===chosenIndex}]" @click="choseVideo(index)" v-for="(item,index) in videoListVOList">
            <span style="cursor: pointer">{{index+1}}、{{item.videoName}}</span>
          </div>
        </div>
        <div id="editor">

        </div>
        <div class="save" @click="save">保存</div></div>
      <div class="rest-part">
        <div class="questions">
          <h2>问题窗口</h2>
          <div v-if="!questions||questions.length===0" class="no-question">无相关问题</div>
          <div class="question" v-for="(question,index) in questions">
            <div class="question-title" @click="showAnswerBox(index)">{{question.title}}</div>
            <div class="question-answer" v-if="show_answer===index">
              <div class="text" v-if="question.answer===null || question.answer===undefined || question.answer=== ''">暂无回答</div>
              <div v-else>
                <div class="text">
                  回答：{{question.answer}}
                </div>
<!--                <div class="to-detail">去详情页看看</div>-->
                </div>
            </div>
          </div>
          <div class="addQ">
            <input type="text" v-model="my_question" placeholder="搜一搜有没有你想问的问题"></input>
            <div class="add-btn" @click="searchQuestion">点击搜索</div>
          </div>
        </div>
        <div class="blogs">
          <h2>相关博客</h2>
          <h4 v-if="blogListVOList.length === 0">无推荐博客</h4>
          <div class="blog-title" @click="window.open(item.link, '_blank')" v-for="item in blogListVOList">
            <span>{{item.linkName}}</span>
          </div>
        </div>
      </div>
    </ContainerBox>
  </div>
</template>

<script>
import IndexNav from "../../components/skill/index/index_nav.vue";
import ContainerBox from "../../components/box/container_box";
export default {
  name: "learn_detail_page",
  components: {ContainerBox, IndexNav},
  data() {
    return {
      chosenIndex: -1,
      blogListVOList: [],
      content: "",
      id: "",
      title: "",
      videoListVOList: [],
      questions: [],
      my_question: '',
      show_answer: -1,
      currentPage: 1,
      stop: false
    }
  },
  mounted() {
    this.$editor.getEditorForLearnPage();
    this.getLearnResource();
    this.getNoteDetail();
    this.getQuestions();
  },
  methods: {
    choseVideo(index) {
      this.chosenIndex = index;
      const self = this;
      console.log(self.videoListVOList);
      document.getElementById("d3").innerHTML = "<iframe style='border-radius: 10px;\n" +
        " width: 900px;\n" +
        " height: 600px;\n" +
        " margin-right: 10px;'"+
        " src='https://player.bilibili.com/player.html?bvid="+
        self.videoListVOList[index].videoLink+
        "&amp;as_wide=1&amp;high_quality=1&amp;danmaku=0&amp;t=0' scrolling='no' sandbox='allow-top-navigation allow-same-origin allow-forms allow-scripts' scrolling='no' sandbox='allow-top-navigation allow-same-origin allow-forms allow-scripts' border='0' framespacing='0' allowfullscreen='true' frameborder='no'></iframe>"
    },
    getLearnResource() {
      const self = this;
      const sectionId = this.$route.params.sectionId;
      if (sectionId==='' || sectionId===null || sectionId === undefined) {
        this.router.push('/notfound');
      }
      this.$axios.get("/skill/section/get/" + sectionId).then(response => {
        let jsonString = JSON.stringify(response.data);
        let jsonObj = JSON.parse(jsonString);
        // let data = jsonObj.data.VO;
        // console.log(data);
        self.blogListVOList=jsonObj.data.VO.blogListVOList;
        if (self.content === '' || self.content === undefined) {
          self.$editor.setHtml("<p>开始你的笔记吧</p>");
        } else {
          self.$editor.setHtml(self.content);
        }
        self.title=jsonObj.data.VO.title;
        self.videoListVOList=jsonObj.data.VO.videoListVOList;
        self.choseVideo(-1);
      })
    },
    getNoteDetail() {
      const self = this;
      this.$axios({
        method: 'get',
        url: '/skill/note/getBySectionId/' + self.$route.params.sectionId
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        if (jsonObj.success) {
          self.content = jsonObj.data.note.content;
          self.id=jsonObj.data.note.id;
          if (self.content === '' || self.content === undefined) {
            self.$editor.setHtml("<p>开始你的笔记吧</p>");
          } else {
            self.$editor.setHtml(self.content);
          }
        } else {
          self.$editor.setHtml("<p>内容获取失败，编辑无效</p>");
          self.$editor.readOnly();
        }
      })
    },
    save() {
      const self = this;
      this.content = self.$editor.getHtml();
      this.$axios({
        method: 'put',
        url: '/skill/note/update',
        data: {
          id : self.id,
          content : self.$editor.getHtml()
        }
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        if (jsonObj.success) {
          self.$message({
            type: 'success',
            message: '笔记保存成功!'
          });
        } else {
          self.$message({
            type: 'failed',
            message: '笔记保存失败!'
          });
        }
      })
    },
    getQuestions(){
      const self = this;
      this.$axios({
        method: 'post',
        url: '/skill/question/pageQuestionCondition/'+self.currentPage+'/10',
        data: {
          sectionId: self.$route.params.sectionId,
          skillId: this.$route.params.id,
          title: self.my_question
        }
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        console.log(jsonObj);
        for (let i=0; i<10; i++) {
          if (jsonObj.data.rows[i] === undefined || jsonObj.data.rows[i] === null) {
            self.stop = true;
            break;
          }
          self.$set(self.questions,self.currentPage*10+i-10,jsonObj.data.rows[i]);
        }
        self.currentPage += 1;
      })
    },
    searchQuestion() {
      this.questions=[];
      this.currentPage= 1;
      this.stop= false;
      this.getQuestions();
    },
    showAnswerBox(index) {
      if (index === this.show_answer) {
        this.show_answer = -1;
      } else {
        this.show_answer = index;
      }
    },
    postQuestion: function () {
      const self = this;
      this.$axios({
        method: 'post',
        url: '/skill/question/save',
        data: {
          title: self.my_question,
          skillId: self.$route.params.id,
          sectionId: self.$route.params.sectionId
        }
      }).then(function (response) {
        var jsonString = JSON.stringify(response.data);
        var jsonObj = JSON.parse(jsonString);
        if (jsonObj.success) {
          self.$message({
            type: 'success',
            message: '问题发布成功!'
          });
          self.getQuestions();
        } else {
          self.$message({
            type: 'warning',
            message: '问题发布失败!'
          });
        }
      })
    }
  },
  watch: {
    my_question(after, before) {
      if (after === '' || after === null) {
        this.questions=[];
        this.currentPage= 1;
        this.stop= false;
        this.getQuestions();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/style/common";
#editor {
  width: 360px;
}
.learn-page-detail{
  box-sizing: border-box;
  padding-top: 80px;
  width: 100%;
  height: 100%;
  .learn-page-main {
    position: relative;
    margin: 0 auto;
    width: 1350px;
    height: 630px;
    overflow: auto;
    &::-webkit-scrollbar {
      //width: 0;
    }
    .video-part {
      box-sizing: border-box;
      width: 900px;
      height: 600px;
      .video-area, iframe {
        border-radius: 10px;
        width: 900px;
        height: 600px;
        margin-right: 10px;
      }
      .video-area {
        position: relative;
        >div {
          position: absolute;
          font-size: 24px;
          font-weight: 600;
        }
        .mark-menu {
          right: 10px;
          top: 40px;
        }
        .mark-note {
          bottom: 50px;
          right: 10px;
        }
        .mark-sources {
          bottom: 30px;
          left: 140px;
        }
        h1 {
          text-align: center;
          white-space: normal;
        }
      }
    }
    .right-part {
      position: absolute;
      right: 25px;
      top: 10px;
      .video-menu{
        background-color: #ffffff;
        height: 200px;
        width: 360px;
        overflow: auto;
        margin-bottom: 20px;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px 15px;
        .video-title {
          height: 30px;
          line-height: 30px;
          margin-bottom: 5px;
          border-radius: 5px;
          padding-left: 5px;
          @include content_over();
          transition: 0.5s;
          font-size: 16px;
          &:hover {
            transition: 0.5s;
            padding-left: 10px;
            color: #3eb3e5;
            background-color: #f3f3f3;
          }
        }
        .chosen-title {
          transition: 0.5s;
          padding-left: 10px;
          color: #3eb3e5;
          background-color: #ececec;
        }
      }
      .save{
        z-index: 10001;
        position: absolute;
        top: 265px;
        right: 30px;
        @include btn_add();
      }
    }
    .rest-part {
      margin-top: 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      >div {
        box-sizing: border-box;
        border-radius: 15px;
        background-color: white;
        height: 420px;
        padding: 20px;
        overflow: auto;
      }
      .blogs {
        margin-left: 35px;
        width: 360px;
        .blog-title {
          font-size: 18px;
          font-weight: 500;
          color: #2d2d2d;
          margin-bottom: 10px;
          span {
            transition: 0.5s;
            cursor: pointer;
            &:hover {
              transition: 0.5s;
              padding-left: 5px;
              color: #3eb3e5;
            }
          }
        }
      }
      .questions{
        position: relative;
        width: 900px;
        .question {
          margin-bottom: 5px;
          .question-title {
            padding: 5px;
            border-radius: 5px;
            white-space: normal;
            font-size: 14px;
            cursor: pointer;
            background-color: #f5f5f5;
            @include backgroundGradual(#cff0ff);
          }
          .question-answer {
            .text {
              /*position: absolute;
              left: 250px;
              top: 0;*/
              margin: 10px 0;
              max-height: 300px;

              box-sizing: border-box;
              box-shadow: 1px 1px 8px #c1c1c1;
              background-color: #a5ddff;
              border-radius: 10px;
              padding: 10px;
              white-space: normal;
              /*overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 8;
              -webkit-box-orient: vertical;*/
              overflow: auto;
              font-size: 14px;
            }
            .to-detail {
              color: #2d2d2d;
              position: absolute;
              top: 320px;
            }
          }
        }
        .addQ {
          position: absolute;
          top: 40px;
          right: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 520px;
          input {
            @include input_1();
            background-color: #f5f5f5;
            margin: 0;
            width: 400px;
          }
          .add-btn {
            @include btn_add();
          }
        }
      }
    }
  }
}
.color-1{
  background: radial-gradient(circle at 50% 150%,hotpink, darkblue);
}
.color-2 {
  background: linear-gradient(slateblue, cornflowerblue);
}
.color-3{
  background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898; background-blend-mode: multiply,multiply;
}
.color-4 {
  background: url('../../assets/images/background.jpg') no-repeat center / cover ;
}
</style>
